<template>
  <div>
    <div class="songTitle">
      <h3 class="titleLeft">{{ song }}</h3>
      <div class="titleRight" v-if="isShow">
        <a href="">全部</a>
        <span class="line">|</span>
        <a href="">华语</a>
        <span class="line">|</span>
        <a href="">欧美</a>
        <span class="line">|</span>
        <a href="">韩国</a>
        <span class="line">|</span>
        <a href="">日本</a>
      </div>
    </div>
    <div class="songUl">
      <ul>
        <li v-for="item in albumList" :key="item.id">
          <img :src="item.blurPicUrl" />
          <div class="songName">
            <a href="">{{ item.name }}</a>
            <br />
            <a href="">{{ item.artist.name }}</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'NewSong',
  props: {
    song: {
      type: String
    },
    isShow: {
      type: Boolean
    }
  },
  // 映射在计算属性中
  computed: {
    ...mapState('albumlist', ['albumList'])
  },

  // 映射更新数据的方法
  methods: {
    ...mapActions('albumlist', ['getAlbumList'])
  },

  // 一上来就发请求
  mounted() {
    const data = this.getAlbumList()
    console.log(data)
  }
}
</script>

<style lang="less" scoped>
.songTitle {
  width: 100%;
  display: flex;
  border-bottom: 2px solid #c20c0c;
  padding-bottom: 10px;
}
.titleLeft {
  font-size: 24px;
  flex-wrap: wrap;
  font-weight: normal;
}
.titleRight {
  float: left;
  display: block;
  font-size: 12px;
  margin: 12px 0 0 20px;
  flex-direction: row;
  .line {
    margin: 0 10px;
  }
}
.songUl {
  padding-top: 30px;
  align-content: flex-start;
  li {
    text-align: left;
    display: inline-block;
    padding-right: 27px;
    padding-bottom: 30px;
    .songName {
      width: 153px;
      overflow: hidden;
      white-space: nowrap;
    }

    img {
      width: 153px;
      height: 130px;
    }
  }
}
</style>
